iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

全端成長之旅系列 第 17

Day.17 Vue3 介紹 Part 12

  • 分享至 

  • xImage
  •  

今天介紹 Vue 3 的 Provide/Inject

Provide

provide 最常用的 3個用法:

import { provide, ref, readonly } from 'vue'

export default {
    setup() {
    
        // 範例1,提供一個值
        provide('foo', 100)
        
        // 範例2,提供一個響應式物件
        // 以及提供一個修改方法
        const bar = ref(0);
        provide('bar', bar)
        provide('updateBar', () => bar.value++)
       
        // 範例3,提供一個僅讀的響應式物件
        const baz = ref('Hello!!')
        provide('baz', readonly(baz))
        
    }
}

Inject

延續上面 Provide 的範例,可以這樣使用 inject

import { inject } from 'vue'

export default {
  setup() {

    // inject 有2個參數
    // 第一個參數是必填的 key
    // 第二個參數是選填的 default 值
    const foo = inject('foo', 'Default value')
    const bar = inject('bar')
    const updateBar = inject('updateBar')
    const baz = inject('baz')

    return {
      foo,
      bar,
      updateBar,
      baz
    }
  }
}

上一篇
Day.16 Vue3 介紹 Part 11
下一篇
Day.18 前端下一步
系列文
全端成長之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言